<template>
  <view class="market-wrapper" :style="appThemeStyle">
    <view v-if="couponList.length || marketList.length" class="market-info">

      <!-- 优惠券 -->
      <view v-if="couponList.length" class="draw-item center" @click="handlePopup()">
        <view class="draw-left">
          <text>领券：</text>
        </view>
        <view class="draw-content">
          <view class="coupon-list">
            <view class="coupon-item" v-for="(item, index) in couponList" :key="index">
              <view class="tag-wrapper">
                <text class="tag-text">{{ item.name }}</text>
              </view>
            </view>
          </view>
        </view>
        <view class="draw-right">
          <text class="draw-arrow iconfont icon-arrow-right"></text>
        </view>
      </view>

      <!-- 促销活动 -->
      <view v-if="marketList.length" class="draw-item" @click="handlePopup()">
        <view class="draw-left">
          <text>促销：</text>
        </view>
        <view class="draw-content">
          <view class="market-list">
            <block v-for="(item, index) in marketList" :key="index">
              <view v-if="item.isFirst" class="market-item">
                <u-tag :color="appTheme.mainBg" :border-color="appTheme.mainBg" :text="item.tagName" type="error" size="mini"
                  mode="plain" />
                <view class="market-content">
                  <text>{{ item.title }}</text>
                </view>
              </view>
            </block>
          </view>
        </view>
        <view class="draw-right">
          <text class="draw-arrow iconfont icon-arrow-right"></text>
        </view>
      </view>
    </view>

    <!-- 详情内容弹窗 -->
    <u-popup v-model="showPopup" mode="bottom" :closeable="true" :border-radius="26">
      <view class="popup-content">
        <view class="title">优惠详情</view>
        <scroll-view class="content-scroll" :scroll-y="true">

          <!-- 促销信息 -->
          <view v-if="marketList.length" class="market-title">
            <text>促销</text>
          </view>
          <view v-if="marketList.length" class="market-list">
            <view class="market-item" v-for="(item, index) in marketList" :key="index" @click.stop="handleContent(index)">
              <view class="item-left">
                <u-tag :color="appTheme.mainBg" :border-color="appTheme.mainBg" :text="item.tagName" type="error" size="mini"
                  mode="plain" />
              </view>
              <view class="item-content">
                <text>{{ item.title }}</text>
              </view>
              <view v-if="item.describe" class="item-right">
                <text class="draw-arrow iconfont icon-arrow-right"></text>
              </view>
            </view>

          </view>

          <!-- 优惠券列表 -->
          <view v-if="couponList.length" class="market-title m-top30">
            <text>领券</text>
          </view>
          <view v-if="couponList.length" class="coupon-list">
            <view class="coupon-item" v-for="(item, index) in couponList" :key="index">
              <view class="item-wrapper" :class="[ !item.state.value ? 'disable' : '' ]">
                <!-- 优惠券类型 (标签) -->
                <view class="coupon-tag">
                  <text>{{ CouponTypeEnum[item.coupon_type].name }}</text>
                </view>
                <view class="coupon-left">
                  <!-- 优惠额度/折扣 -->
                  <view class="coupon-reduce">
                    <block v-if="item.coupon_type == CouponTypeEnum.FULL_DISCOUNT.value">
                      <view class="coupon-reduce-unit"><text>￥</text></view>
                      <view class="coupon-reduce-amount">
                        <text class="value">{{ item.reduce_price }}</text>
                      </view>
                    </block>
                    <block v-if="item.coupon_type == CouponTypeEnum.DISCOUNT.value">
                      <view class="coupon-reduce-amount">
                        <text class="value">{{ item.discount }}折</text>
                      </view>
                    </block>
                  </view>
                  <!-- 最低消费金额 -->
                  <text class="coupon-hint">满{{ item.min_price }}元可用</text>
                </view>
                <view class="coupon-content">
                  <view class="coupon-name">{{ item.name }}</view>
                  <view class="coupon-middle">
                    <view class="coupon-expire">
                      <text v-if="item.expire_type == CouponTypeEnum.FULL_DISCOUNT.value">领取后{{ item.expire_day }}天内有效</text>
                      <text v-if="item.expire_type == CouponTypeEnum.DISCOUNT.value">
                        <block v-if="item.start_time === item.end_time">{{ item.start_time }} 当天有效</block>
                        <block v-else>{{ item.start_time }}~{{ item.end_time }}</block>
                      </text>
                    </view>
                  </view>
                  <view v-if="item.describe" class="coupon-expand" @click="handleDescribe(index)">
                    <text>使用说明</text>
                    <text class="coupon-expand-arrow iconfont icon-arrow-down" :class="[item.expand ? 'expand' : '']" />
                  </view>
                </view>
                <view class="coupon-right">
                  <view v-if="$checkModule('market-coupon') && item.state.value" class="btn-receive" @click="handleReceive(item.coupon_id)">
                    <text>领取</text>
                  </view>
                  <view v-if="!item.state.value" class="state-text">
                    <text>{{ item.state.text }}</text>
                  </view>
                </view>
              </view>
              <!-- 优惠券描述 -->
              <view :class="[item.expand ? 'expand' : '']" class="coupon-expand-rules">
                <view class="coupon-expand-rules-content">
                  <view class="pre">{{ item.describe }}</view>
                </view>
              </view>
            </view>
          </view>

        </scroll-view>

      </view>
    </u-popup>

    <!-- 活动描述弹窗 -->
    <u-modal v-model="descModal.show" :title="descModal.title">
      <view class="pops-content">
        <text>{{ descModal.content }}</text>
      </view>
    </u-modal>
  </view>
</template>

<script>
  import * as MarketApi from '@/api/market'
  import * as MyCouponApi from '@/api/myCoupon'
  import { CouponTypeEnum } from '@/common/enum/coupon'

  export default {
    props: {
      // 商品ID
      goodsId: {
        type: Number,
        default: null
      },
      // 商品来源
      goodsSource: {
        type: Number,
        default: null
      }
    },
    data() {
      return {
        // 枚举类
        CouponTypeEnum,
        // 正在加载
        isLoading: true,
        // 显示活动详情弹层
        showPopup: false,
        // 显示活动描述弹窗
        descModal: {
          show: false,
          title: '',
          content: '',
        },
        // 优惠列表
        marketList: [],
        // 优惠券列表
        couponList: []
      }
    },

    created() {
      // 获取优惠详情
      this.getMarketDetail()
    },

    methods: {

      // 获取优惠详情
      getMarketDetail() {
        const app = this
        app.isLoading = true
        MarketApi.detail({ goodsId: app.goodsId || 0, source: app.goodsSource })
          .then(result => {
            app.marketList = result.data.marketList
            app.couponList = result.data.couponList
          })
          .finally(() => app.isLoading = false)
      },

      // 显示弹窗
      handlePopup() {
        this.showPopup = !this.showPopup
      },

      // 立即领取
      handleReceive(couponId) {
        const app = this
        MyCouponApi.receive(couponId)
          .then(result => {
            // 显示领取成功提示
            app.$success(result.message)
            // 刷新优惠券列表
            app.getMarketDetail()
          })
      },

      // 展开优惠券描述
      handleDescribe(index) {
        this.couponList[index].expand = !this.couponList[index].expand
      },

      // 显示活动描述内容
      handleContent(index) {
        const item = this.marketList[index]
        if (!item.describe) {
          return
        }
        this.descModal.show = true
        this.descModal.title = item.tagName
        this.descModal.content = item.describe
      },

    }
  }
</script>

<style lang="scss" scoped>
  .market-info {
    margin-top: 40rpx;

    .draw-item {
      display: flex;
      align-items: flex-start;
      font-size: 26rpx;
      margin-bottom: 34rpx;

      &.center {
        align-items: center;
      }

      &:last-child {
        margin-bottom: 0;
      }

      .draw-left {
        color: #888;
      }

      .draw-content {
        flex: 1;
      }

      .draw-right {
        color: #999;
      }
    }

    // 优惠券列表
    .coupon-list {
      display: flex;
      overflow: hidden;

      max-width: 564rpx;
      overflow: hidden;

      .coupon-item {
        font-size: 24rpx;
        margin-right: 16rpx;
        position: relative;

        &:last-child {
          margin-right: 0;
        }

        .tag-wrapper {
          padding: 2rpx 14rpx;
          position: relative;
          border: 1px solid #f00;
          box-sizing: border-box;

          mask: radial-gradient(circle at left, transparent 0px, #000 0), radial-gradient(circle at right, transparent 0px, #000 0);
          mask-size: 50% 100%;
          mask-position: left, right;
          mask-repeat: no-repeat;

          &::before,
          &::after {
            content: '';
            position: absolute;
            top: 10rpx;
            border: 1rpx solid #f00;
            width: 12rpx;
            height: 12rpx;
            border-radius: 100%;
            background: #ffffff;
          }

          &::before {
            right: -10rpx;
          }

          &::after {
            left: -10rpx;
          }

          .tag-text {
            color: #f00;
            font-size: 22rpx;
            white-space: nowrap;
          }
        }
      }
    }

    // 促销活动
    .market-list {
      .market-item {
        display: flex;
        margin-bottom: 20rpx;

        &:last-child {
          margin-bottom: 0;
        }

        .market-tag {}

        .market-content {
          margin-left: 12rpx;
          color: #424242;
        }
      }
    }
  }

  // 弹窗内容
  .popup-content {
    padding: 24rpx;
    // 设置ios刘海屏底部横线安全区域
    padding-bottom: calc(constant(safe-area-inset-bottom) + 24rpx);
    padding-bottom: calc(env(safe-area-inset-bottom) + 24rpx);

    .title {
      font-size: 30rpx;
      margin-bottom: 50rpx;
      font-weight: bold;
      text-align: center;
    }

    .content-scroll {
      min-height: 500rpx;
      max-height: 800rpx;
    }

    .market-title {
      font-size: 26rpx;
      color: #888;
      margin-bottom: 20rpx;
      margin-top: 50rpx;

      &:first-child {
        margin-top: 0;
      }
    }

    .market-item {
      display: flex;
      align-items: center;
      margin-bottom: 30rpx;

      &:last-child {
        margin-bottom: 0;
      }

      .item-left {
        margin-right: 40rpx;
      }

      .item-content {
        flex: 1;
      }
    }

    .coupon-list {
      padding: 20rpx 20rpx;
    }

    .coupon-item {
      margin-bottom: 22rpx;
      font-size: 24rpx;
      background: #fff;
      border-radius: 12rpx;
      overflow: hidden;
      box-shadow: 0 4rpx 30rpx 0 rgba(0, 0, 0, .04);
      position: relative;
    }

    .item-wrapper {
      display: flex;
      align-items: center;

      &.disable {
        .coupon-tag {
          background: linear-gradient(-113deg, #bdbdbd, #a2a1a2);
        }

        .coupon-reduce {
          color: #757575;
        }

        .state-text {
          color: #757575;
        }
      }
    }

    .coupon-tag {
      position: absolute;
      left: 0;
      top: 0;
      color: #fff;
      width: 96rpx;
      text-align: center;
      font-size: 22rpx;
      border-radius: 12rpx 0 12rpx 0;
      font-weight: 500;
      height: 34rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(to right, $main-bg, $main-bg2);
      color: $main-text;
    }

    .coupon-left {
      width: 242rpx;
      text-align: center;
      display: flex;
      flex-flow: column;
      justify-content: center;
      position: relative;

      .coupon-reduce {
        color: $main-bg;

        &-unit {
          display: inline-block;
          margin-right: -4rpx;
          font-size: 32rpx;
          font-weight: 600;
        }

        &-amount {
          display: inline-block;

          .value {
            font-size: 48rpx;
          }
        }

      }

      .coupon-hint {
        margin-top: 12rpx;
        color: #757575;
        font-size: 24rpx;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }

    .coupon-content {
      flex: 1;
      padding: 32rpx 0;
      position: relative;
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      align-items: flex-start;
      justify-content: space-between;

      .coupon-name {
        color: #212121;
        font-size: 28rpx;
        font-weight: 500;
      }

      .coupon-middle {
        flex: 1;
        padding-top: 12rpx;
        margin-bottom: 26rpx;

        .coupon-expire {
          color: #757575;
          font-size: 24rpx;
        }
      }

      .coupon-expand {
        display: flex;
        align-items: center;
        color: #9e9e9e;
        font-size: 24rpx;

        &-arrow {
          margin-top: 4rpx;
          font-size: 24rpx;
          display: inline-block;
          vertical-align: initial;
          transform: rotate(0);
          margin-left: 8rpx;
          transition: all .15s ease-in-out;

          &.expand {
            transform: rotate(180deg);
          }
        }
      }

    }

    .coupon-right {
      padding-right: 38rpx;

      .btn-receive,
      .state-text {
        text-align: center;
        width: 100rpx;
        padding: 15rpx 0;
      }

      .btn-receive {
        font-size: 23rpx;
        line-height: 1;
        font-weight: 500;
        border-radius: 8rpx;
        cursor: pointer;
        background: linear-gradient(to right, $main-bg, $main-bg2);
        color: $main-text;
      }

      .state-text {}
    }

    .coupon-expand-rules {
      display: none;
      position: relative;

      &.expand {
        top: -30rpx;
        display: block;
      }

      &-content {
        padding: 8rpx 30rpx 8rpx 242rpx;
        font-weight: 400;
        color: #9e9e9e;
        line-height: 36rpx;

        .pre {
          font-family: auto;
          white-space: pre-wrap;
          word-wrap: break-word;
          word-break: break-all;
        }
      }
    }

  }


  // 活动描述弹窗
  .pops-content {
    padding: 30rpx 48rpx;
    font-size: 28rpx;
    line-height: 44rpx;
    text-align: left;
    color: #606266;
    // min-height: 320rpx;
    max-height: 640rpx;
    box-sizing: border-box;
  }
</style>